<template>
  <div class="topic-wrapper container">
    <div v-if="$util.isEmpty(topicList)" class="topic-empty"><EduNoData></EduNoData></div>
    <template v-else>
      <div class="point-question">
        <Question
          v-for="item in topicList"
          :key="item.id"
          :question="item"
          :qType="item.question_type"
          :collected="topicCollected"
          :answer="current_field"
          :is_answered="answered"
          @change="change"
          @collected="changeCollected"
        ></Question>
      </div>
      <div class="pagination-wrapper">
        <el-button type="primary" size="small" @click="changeTopicNext" v-if="nextQuery.topic_id"
          >下一题</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="handleTopicEnd"
          v-else-if="!nextQuery.topic_id && topicAnswered == 0"
          >提交</el-button
        >
      </div>
    </template>
  </div>
</template>

<script>
import Question from '../../components/wrong-question'
import EduNoData from '@/components/EduNoData'
import { mapState } from 'vuex'
export default {
  components: {
    Question,
    EduNoData
  },
  data() {
    return {
      topicList: [],
      current_field: { radio: '', checkList: [] },
      topicCurrentAnswer: [],
      topicLoading: true,
      topicAnswered: 0,
      prevQuery: {},
      nextQuery: {}
    }
  },
  computed: {
    ...mapState({
      topicId: state => state.exercise.topic_id,
      topicIsright: state => state.exercise.topic_is_right,
      topicCollected: state => state.exercise.topic_collected
    }),
    answered() {
      return this.topicAnswered == 1 && !this.topicLoading
    }
  },
  created() {
    this.nextQuery = {
      epar_id: this.$route.query.id,
      unique_code: this.$route.query.code,
      part_id: 0,
      topic_id: 0
    }
    this.getExamTopic(this.nextQuery)
  },
  methods: {
    // 获取试题
    getExamTopic(query) {
      let _this = this
      _this.initOptions()
      _this.$api.getUserExamRecordWrongTopic(query, res => {
        if (_this.$util.isEmpty(res.data)) return
        _this.prevQuery = res.data.prev
        _this.nextQuery = res.data.next
        _this.topicList = [res.data.topic]
        _this.$store.commit('exercise/SET_WRONG_TOPIC_ID', res.data.topic.topic_id)
        _this.topicLoading = false
        _this.setTopicCollected()
        _this.setTopicCorrectAnswer()
      })
    },
    // 选择的值变化时触发
    change(value) {
      this.topicCurrentAnswer = value
    },
    // 初始化参数，不然会影响其他试题参数
    initOptions() {
      this.topicLoading = true
      this.topicAnswered = 0
      this.topicCurrentAnswer = []
      this.current_field = {
        radio: '',
        checkList: []
      }
    },
    // 设置试题收藏默认状态
    setTopicCollected() {
      const topic = this.topicList.find(item => item)
      this.$store.commit('exercise/SET_POINT_TOPIC_COLLECTED', topic.collected)
    },
    // 切换收藏状态
    changeCollected() {
      let status = this.topicCollected == 1 ? 0 : 1
      this.$api.postExamTopicCollect(
        {
          topic_id: this.topicId.toString(),
          status: status
        },
        res => {
          this.$message.info(res.data)
          this.$store.commit('exercise/SET_POINT_TOPIC_COLLECTED', status)
        }
      )
    },
    // 设置当前试题的正确答案
    setTopicCorrectAnswer() {
      this.$store.commit('exercise/SET_POINT_CURRENT_CORRECT_ANSWER', this.topicList)
    },
    // 下一题
    async changeTopicNext() {
      if (this.topicAnswered == 0) {
        await this.handleSubmitAnswer()
        if (this.topicIsright == 1) return this.getExamTopic(this.nextQuery)
        this.topicAnswered = 1
      } else {
        this.getExamTopic(this.nextQuery)
        this.$store.commit('exercise/SET_POINT_NEXT')
      }
    },
    // 直接提交
    handleTopicEnd() {
      if (this.topicAnswered == 0) {
        this.topicAnswered = 1
        this.handleSubmitAnswer()
      }
    },
    // 提交答案
    handleSubmitAnswer() {
      const topic = this.topicList.find(item => item)
      this.$store.commit('exercise/SET_WRONG_TOPIC_IS_RIGHT', {
        question_type: topic.question_type,
        answer_data: this.topicCurrentAnswer
      })
      // 提交答案
      this.$api.postExamTopicWrong({
        topic_level: 1,
        topic_id: this.topicId.toString(),
        is_right: this.topicIsright
      })
    }
  },
  destroyed() {
    // 销毁页面时初始化vuex的状态
    this.$store.commit('exercise/SET_TOPIC_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.topic-wrapper {
  margin-top: 10px;
  background-color: #ffffff;
  .topic-empty {
    padding: 120px 0;
  }
  .point-question {
    padding: 5px 20px 20px;
  }
  .pagination-wrapper {
    border-top: 1px solid #f7f7f7;
    padding: 24px 20px;
    display: flex;
    justify-content: flex-end;
    .el-button {
      width: 140px;
    }
  }
}
</style>
